<template>
  <div class="shop_manage">
    <div style="height: 100%;" v-if="shopShow">
      <header>
        <el-form :model="searchForm">
          <el-form-item>
            <el-input v-model.trim="searchForm.keyword" @change="getShopInfoPage" clearable placeholder="商户名称/联系人/手机号"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model.trim="searchForm.parkName" @change="getShopInfoPage" clearable placeholder="关联车场名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="searchForm.businessType" @change="getShopInfoPage" clearable  placeholder="请选择经营类型">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="注册开始日期"
              end-placeholder="注册结束日期"
              @change="getShopInfoPage" clearable>
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getShopInfoPage">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button class="addBtn" @click="addShopShow = true" icon="el-icon-circle-plus-outline" type="warning">新增店铺</el-button>
      </header>

      <section>
        <el-table :data="tableData" border height="100%">
          <el-table-column label="店铺名称" prop="shopName" align="center"></el-table-column>
          <el-table-column label="店铺地址" prop="shopAddress" align="center"></el-table-column>
          <!-- <el-table-column label="商户编号" prop="" align="center"></el-table-column> -->
          <el-table-column label="联系人" prop="username" align="center"></el-table-column>
          <el-table-column label="手机号" prop="telephone" align="center"></el-table-column>
          <el-table-column label="经营类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.businessType | typeFilter}}
            </template>
          </el-table-column>
          <el-table-column label="关联车场" align="center">
            <template slot-scope="scope">
              {{ scope.row.parkList | parkListFilter }}
            </template>
          </el-table-column>
          <el-table-column label="注册时间" prop="createTime" align="center"></el-table-column>
          <el-table-column label="线上展示状态" prop="status" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="toGoodsManage(scope.row)">商品管理</el-button>
              <el-button size="mini" type="warning" @click="editShow = true,row = scope.row">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </section>

      <footer>
        <el-pagination
          :current-page="searchForm.currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="searchForm.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          align="center"
          style="margin-top: 10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </footer>
    </div>

    <div style="height: 100%;" v-if="!shopShow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品管理" name="first">
          <goodsManage :id="shopId" @refresh="" />
        </el-tab-pane>
        <el-tab-pane label="券类管理" name="second">
          <couponsManage :id="shopId" @refresh="" />
        </el-tab-pane>
      </el-tabs>
      <el-button class="back" size="mini" type="primary" @click="shopShow = true">返回商户</el-button>
    </div>


    <el-dialog title="新增店铺" :visible.sync="addShopShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <addShop v-if="addShopShow" @closeDialog="addShopShow = false" @refresh="getShopInfoPage" />
    </el-dialog>

    <el-dialog :visible.sync="editShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <editShop v-if="editShow" :row="row" @closeDialog="editShow = false" @refresh="getShopInfoPage" />
    </el-dialog>

  </div>
</template>

<script>
  import addShop from './components/addShop.vue'
  import goodsManage from './components/goodsManage.vue'
  import couponsManage from './components/couponsManage.vue'
  import editShop from './components/editShop.vue'

  export default {
    components: { addShop , goodsManage , couponsManage , editShop },
    filters: {
      typeFilter(type) {
        switch(type) {
          case 1:
            return '餐饮';
          case 2:
            return '加油站';
          case 3:
            return '洗车';
          case 4:
            return '养车';
          case 5:
            return '商超';
          case 6:
            return '其他'
        }
      },
      parkListFilter(list) {
        let parkNames = null;
        if(list) {
          list.forEach(item => {
            if(parkNames) {
              parkNames += '，' + item.parkName;
            } else {
              parkNames = item.parkName;
            }
          })
        }
        return parkNames
      }
    },
    data() {
      return {
        value1: null,
        activeName: 'first',
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        addShopShow: false,
        goodsShow: false,
        options: [
          {
            label: '餐饮',
            value: 1
          },
          {
            label: '加油站',
            value: 2
          },
          {
            label: '洗车',
            value: 3
          },
          {
            label: '养车',
            value: 4
          },
          {
            label: '商超',
            value: 5
          },
          {
            label: '其他',
            value: 6
          }
        ],
        tableData: [],
        shopShow: true,
        shopId: null,
        editShow: false
      }
    },

    mounted() {
      this.getShopInfoPage();
    },

    methods: {
      getShopInfoPage() {
        this.$axios({
          method: 'post',
          url: '/shop/shop-info/getShopInfoPage',
          data: this.$qs.stringify(this.searchForm)
        }).then((res) => {
          console.log(res)
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.status = item.status == 1 ? true : false
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      toGoodsManage(item) {
        this.shopShow = false;
        this.shopId = item.id;
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        // this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        // this.getTableData();
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },

      changeStatus(item) {
        let data = {};
        data.shopId = item.id;
        data.status = item.status == true ? 1 : 0;
        this.$axios({
          method: 'post',
          url: '/shop/shop-info/updateStatus',
          data: this.$qs.stringify(data)
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('修改展示状态成功')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .shop_manage {
    height: calc(100vh - 84px);
    padding: 10px;
  }

  header {
    height: 50px;
    position: relative;
  }

  section {
    height: calc(100% - 100px);
  }

  footer {
    height: 50px;
  }

  .el-form-item {
    display: inline-block;
    margin-right: 10px;
  }

  .el-input {
    width: 200px;
  }

  .addBtn {
    position: absolute;
    right: 20px;
    top: 0;
  }

  .back {
    position: absolute;
    right: 20px;
    top: 16px;
  }



</style>
